import { AgentServiceStatus, SelectAgentOptions } from '@/modules/interface';
import styled from '@emotion/styled';
import { Empty, Form, Select } from 'antd';
import { t } from 'i18next';
import React from 'react';
const { Option } = Select;

const FormSelect = styled(Select)`
	width: 100%;
	.ant-select-selector {
		height: 40px !important;
		background-color: #f6f6f6 !important;
	}
	.ant-select-selection-placeholder {
		line-height: 40px !important;
	}
	input {
		height: 40px !important;
	}
`;

const OptionItem = styled.div`
	display: flex;
	align-items: center;
	height: 100%;
	justify-content: space-between;
`;

const LabelContainer = styled.p`
	margin: 0;
	padding: 0;
`;

const StatusContainer = styled.p`
	margin: 0;
	padding: 0;
`;

const GreenStatus = styled.span`
	margin: 0 6px;
	display: inline-block;
	background-color: #3cd676;
	width: 8px;
	height: 8px;
	border-radius: 50%;
`;

const RedStatus = styled.span`
	margin: 0 6px;
	display: inline-block;
	background-color: #de0112;
	width: 8px;
	height: 8px;
	border-radius: 50%;
`;

interface AgentSelectProps {
	notFoundContent?: React.ReactNode;
	placeholder?: string;
	label?: string;
	name: string;
	error?: string | undefined;
	onDropdown?: () => void;
	onScroll?: () => void;
	options: SelectAgentOptions[];
}

const AgentSelect = (props: AgentSelectProps) => {
	const { options = [], label = '', name, placeholder = t('select-transfer-agent-placeholder'), notFoundContent, onDropdown, onScroll, error } = props;
	const handleChange = () => {};

	const onDropdownVisibleChange = (open: boolean) => {
		if (open) {
			onDropdown && onDropdown();
		}
	};

	const onPopupScroll = (e: any) => {
		console.log(e);
		onScroll && onScroll();
	};

	const getStatusCircle = (status: AgentServiceStatus) => {
		if (status === 'ready') return <GreenStatus />;
		return <RedStatus></RedStatus>;
	};

	const getStatusLabel = (status: AgentServiceStatus) => {
		switch (status) {
			case 'offline':
				return <span>{t('offline-status')}</span>;
			case 'notReady':
				return <span>{t('not-ready-status')}</span>;
			case 'ready':
				return <span>{t('ready-status')}</span>;
			case 'ringing':
				return <span>{t('ringing')}</span>;
			case 'serving':
				return <span>{t('serving-status')}</span>;
			case 'afterWork':
				return <span>{t('work-arrange')}</span>;
			case 'otherWork':
				return <span>{t('taking-break')}</span>;
			default:
				return <span></span>;
		}
	};

	const getSelectOption = () => {
		return options.map(item => (
			<Option key={item.id} value={item.value} label={item.label}>
				<OptionItem>
					<LabelContainer>
						<span>{item.label}</span>
						<span>{item.fullName ? `（${item.fullName}）` : ''}</span>
					</LabelContainer>
					<StatusContainer>
						{getStatusCircle(item.status)}
						{getStatusLabel(item.status)}
					</StatusContainer>
				</OptionItem>
			</Option>
		));
	};

	return (
		<>
			<Form.Item label={label} name={name} className="form-input-item">
				<FormSelect
					style={{ width: '100%' }}
					placeholder={placeholder || ''}
					onDropdownVisibleChange={onDropdownVisibleChange}
					bordered={false}
					onChange={handleChange}
					onPopupScroll={onPopupScroll}
					notFoundContent={notFoundContent}
				>
					{getSelectOption()}
				</FormSelect>
			</Form.Item>
			{error ? <p className="transfer-error">{error}</p> : undefined}
		</>
	);
};

export default AgentSelect;
